<!-- 课室申请 -->
<template>
  <view class="pd fgdfgfdtyy">
    <view class="pt20 pm20 z9 fz24">
      流程明细
    </view>
    <view class="bgff kkjlhjksdftty">
      <image
        :src="filterData.flowImgAddress"
        mode="widthFix"
        class="w100"
      ></image>
    </view>

    <view class="pt20 pm20 z9 fz24">
      申请明细
    </view>
    <view class="bgff kkjlhjksdftty fz28">
      <view class="row dfgdftyx pr" @click="openJxl()">
        <view class="fgdgfdty z3"> 教学楼 <text class="red">*</text> </view>
        <view class="col">
          {{ formData.fieldTypeName }}
          <!-- <van-picker
            @change="bindPickerChangea"
            :value="formData.fieldTypeName"
            :range="jaioxidr"
          >
            {{ jaioxidr[formData.fieldTypeName] }}
          </van-picker> -->
        </view>
        <image src="../../../static/img/down.png" class="dsfdsftyxre"></image>
      </view>

      <view class="row dfgdftyx pr btm" @click="openUnity()">
        <view class="fgdgfdty z3"> 所属单位 <text class="red">*</text> </view>
        <view class="col">
          <!-- <picker
            @change="bindPickerChangeb"
            :value="formData.unityName"
            :range="jaioxidrb"
          > -->
          {{ formData.unityName }}
          <!-- </picker> -->
        </view>
        <image src="../../../static/img/down.png" class="dsfdsftyxre"></image>
      </view>

      <view class="row dfgdftyx pr btm">
        <view class="fgdgfdty z3"> 申请人 <text class="red">*</text> </view>
        <view class="col">
          <input
            type="text"
            placeholder="请输入申请人"
            v-model="formData.chargeName"
            class="dsftgrfyy w100 fz28"
          />
        </view>
      </view>
      <view class="row dfgdftyx pr btm">
        <view class="fgdgfdty z3"> 联系电话 <text class="red">*</text> </view>
        <view class="col">
          <input
            type="number"
            placeholder="请输入联系电话"
            v-model="formData.phone"
            class="dsftgrfyy w100 fz28"
          />
        </view>
      </view>
      <view class="row dfgdftyx pr btm">
        <view class="fgdgfdty z3"> 课室数量 <text class="red">*</text> </view>
        <view class="col">
          <input
            type="number"
            placeholder="请输入申请的课室数量"
            v-model="formData.fieldAmount"
            class="dsftgrfyy w100 fz28"
          />
        </view>
        <view class="z6 z3">
          间
        </view>
      </view>

      <view class="row dfgdftyx pr btm">
        <view class="fgdgfdty z3">
          申请日期
        </view>
        <view class="col">
          <picker mode="date" @change="bindPickerChangedase">
            <view class="uni-input">{{ sffgdgf ? sffgdgf : "选择日期" }}</view>
          </picker>
          <!-- <picker mode="date" :value="formData.sffgdgf" @change="bindPickerChangedase">
            {{ formData.sffgdgf }}
          </picker> -->
        </view>
      </view>

      <view @click="openStartTime" class="row dfgdftyx pr btm">
        <view class="fgdgfdty z3">
          开始时间
        </view>
        <view class="col">
          {{ startTime }}
          <!-- <picker
            @change="bindPickerChangec"
            :value="formData.startTime"
            :range="filterData.timeQuantumList"
          >
            {{ jaioxidrc[formData.startTime] }}
          </picker> -->
        </view>
        <image src="../../../static/img/down.png" class="dsfdsftyxre"></image>
      </view>

      <view class="row dfgdftyx pr btm" @click="openEndtime">
        <view class="fgdgfdty z3">
          结束时间
        </view>
        <view class="col">
          {{ endTime }}
          <!-- <picker
            @change="bindPickerChanged"
            :value="formData.endTime"
            :range="filterData.timeQuantumList"
          >
            {{ jaioxidrc[formData.endTime] }}
          </picker> -->
        </view>
        <image src="../../../static/img/down.png" class="dsfdsftyxre"></image>
      </view>

      <view class="row dfgdftyx pr btm">
        <view class="fgdgfdty z3"> 申请理由 <text class="red">*</text> </view>
        <view class="col">
          <textarea
            placeholder="请输入申请理由"
            v-model="formData.purpose"
            class="dsfdsrtty w100 fz28 w100"
          ></textarea>
        </view>
      </view>
    </view>

    <view class="pt20 pm20 z9 fz24">
      申请设备
    </view>
    <view class="bgff kkjlhjksdftty fz28">
      <view class="row dfgdftyx pr">
        <view class="col">
          <view class="row">
            <view class="jjhdsdsrtt">
              投影仪
            </view>
            <view class="col">
              <view class="dfdstydrr">
                <uni-number-box
                  @change="changeAmount0"
                  :min="1"
                  :max="9"
                  :value="formData.equipmentAmount[0].amount"
                />
              </view>
            </view>
          </view>

          <view class="row">
            <view class="jjhdsdsrtt">
              音响
            </view>
            <view class="col">
              <view class="dfdstydrr">
                <uni-number-box
                  :min="1"
                  :max="9"
                  :value="formData.equipmentAmount[1].amount"
                  @change="changeAmount1"
                />
              </view>
            </view>
          </view>
        </view>

        <view class="col">
          <view class="row">
            <view class="jjhdsdsrtt">
              话筒
            </view>
            <view class="col">
              <view class="dfdstydrr">
                <uni-number-box
                  :min="1"
                  :max="9"
                  :value="formData.equipmentAmount[2].amount"
                  @change="changeAmount2"
                />
              </view>
            </view>
          </view>

          <view class="row">
            <view class="jjhdsdsrtt">
              空调
            </view>
            <view class="col">
              <view class="dfdstydrr">
                <uni-number-box
                  :min="1"
                  :max="9"
                  :value="formData.equipmentAmount[3].amount"
                  @change="changeAmount3"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="bgff kkjlhjksdftty mt20 fz28 pm20">
      <view class="fz28 z3 pd pt20 pm20">
        附件推文 <text class="z9 fz26 ml10">({{ formData.planAddress.length }}/5)</text>
      </view>

      <view class="pl10">
        <view
          class="eerttser ml10 cz mt20 pr"
          v-for="(sd, idx) in formData.planAddress"
          @tap="closweer(idx)"
        >
          <image :src="'https://www.waibizi.com/' + sd" class="fm"></image>
          <icon type="clear" color="red" class="dsfertxe"></icon>
        </view>

        <image
          src="../../../static/img/asddf.jpg"
          class="eerttser ml10 cz mt20"
          @tap="yjjhsd"
        ></image>
      </view>
    </view>
    <view class="kjnmxeeretr fz32" @click="submit">
      提交
    </view>
    <uni-popup ref="popup" type="message">
      <uni-popup-message
        :type="messageType"
        :message="message"
      ></uni-popup-message>
    </uni-popup>
  </view>
</template>
<script>
import store from "../../../store/index.js";
import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue";
import uniSection from "@/components/uni-section/uni-section.vue";
export default {
  data() {
    return {
      sffgdgf: "",
      basicURL: "",
      ujnjse: [],
      message: "申请提交成功",
      messageType: "success",
      jaioxidr: [
        "请选择",
        "第一教学楼",
        "第二教学楼",
        "第三教学楼",
        "第四教学楼",
      ],
      jaioxidrb: ["请选择", "校团委", "院团委"],
      jaioxidrc: [
        "请选择时间段",
        "第一节课（8：00-8：40）",
        "第二节课（8：50-9：30）",
      ],
      formData: {
        chargeId: "",
        fieldTypeName: "",
        unityName: "",
        chargeName: "",
        phone: "",
        fieldAmount: "",
        startTime: "请选择开始时间",
        endTime: "",
        purpose: "",
        equipmentAmount: [
          { name: "投影仪", amount: 0 },
          { name: "音响", amount: 0 },
          { name: "话筒", amount: 0 },
          { name: "空调", amount: 0 },
        ],
        planAddress: [],
      },
      filterData: {
        chargeId: 12354815,
        chargeName: "马云腾",
        fieldTypeList: 151236,
        flowImgAddress: "group1/M00/00/01/rBpUXl6m40WAIj9FAAB53iCcSzY071.jpg",
        timeQuantumList: [
          {
            endTime: {
              date: 0,
              day: 0,
              hours: 0,
              minutes: 0,
              month: 0,
              seconds: 0,
              time: 0,
              timezoneOffset: 0,
              year: 0,
            },
            name: "第一节课",
            startTime: {
              date: 0,
              day: 0,
              hours: 0,
              minutes: 0,
              month: 0,
              seconds: 0,
              time: 0,
              timezoneOffset: 0,
              year: 0,
            },
          },
        ],
        unityList: 1205150,
      },

      cdfrrt: [],
      unityList: [],
      timeQuantumList: [],
      startTime: "",
      endTime: "",
    };
  },
  components: {
    uniNumberBox,
    uniSection,
  },
  mounted() {
    //this.init();
    this.basicURL = store.getters.getBasicURL;
    this.applyRender();
  },
  methods: {
    openJxl() {
      let th = this;
      uni.showActionSheet({
        itemList: th.cdfrrt,
        success: function (res) {
          th.formData.fieldTypeName = th.cdfrrt[res.tapIndex];
          th.formData.fieldTypeId =
            th.filterData.fieldTypeList[res.tapIndex].id;
        },
      });
    },
    openUnity() {
      let th = this;
      uni.showActionSheet({
        itemList: th.unityList,
        success: function (res) {
          th.formData.unityName = th.unityList[res.tapIndex];
          th.formData.unityId = th.filterData.unityList[res.tapIndex].id;
        },
      });
    },
    openStartTime() {
      let th = this;
      uni.showActionSheet({
        itemList: th.timeQuantumList,
        success: function (res) {
          th.startTime = th.timeQuantumList[res.tapIndex];
          th.formData.startTime =
            th.filterData.timeQuantumList[res.tapIndex].startTime;
        },
      });
    },
    openEndtime() {
      let th = this;
      uni.showActionSheet({
        itemList: th.timeQuantumList,
        success: function (res) {
          th.endTime = th.timeQuantumList[res.tapIndex];
          th.formData.endTime =
            th.filterData.timeQuantumList[res.tapIndex].endTime;
        },
      });
    },
    async submit() {
      let { sffgdgf, startTime, endTime } = this.formData;
      startTime = this.sffgdgf +' '+ startTime;
      endTime = this.sffgdgf +' '+ endTime;
      this.formData.chargeId = this.filterData.chargeId;
      let data = Object.assign({}, this.formData, {
        startTime,
        endTime,
      });
      data.equipmentAmount = JSON.stringify(data.equipmentAmount);
      data.planAddress = data.planAddress[0];
      let res = await this.$api.applySubmit(data);
      if (res.code == 200) {
        this.message = "申请提交成功";
        this.messageType = "success";
        this.$refs.popup.open();
        setTimeout(() => {
          this.$refs.popup.close();
          uni.navigateBack({
            url: "/pages/gongzuo/shenqing/index",
          });
        }, 1500);
      } else {
        this.message = "填写信息有误，请查验后提交";
        this.messageType = "error";
        this.$refs.popup.open();
        setTimeout(() => {
          this.$refs.popup.close();
        }, 1500);
      }
    },
    async applyRender() {
      let that = this;
      let res = await this.$api.applyRender({
        parentId: this.pageQuery.topFieldTypeId,
      });



      if (res.code == 200) {
        that.filterData = res.data;
        that.filterData.flowImgAddress =
          that.basicURL + res.data.flowImgAddress;
        for (let i = 0; i <= that.filterData.fieldTypeList.length - 1; i++) {
          that.cdfrrt.push(that.filterData.fieldTypeList[i].name);
        }
        for (let i = 0; i <= that.filterData.unityList.length - 1; i++) {
          that.unityList.push(that.filterData.unityList[i].name);
        }

        for (let i = 0; i <= that.filterData.timeQuantumList.length - 1; i++) {
          let str =
            that.filterData.timeQuantumList[i].name +
            "（" +
            that.filterData.timeQuantumList[i].startTime +
            "-" +
            that.filterData.timeQuantumList[i].endTime +
            "）";
          that.timeQuantumList.push(str);
        }

        that.formData.chargeName = that.filterData.chargeName;
      }


      if(this.pageQuery.applyFormId) {
        let result = await this.$api.applyForm(this.pageQuery.applyFormId);
        if (result.code == 200) {
          
          this.formData = result.data;
          this.sffgdgf = result.data.startTime.split(' ')[0]
          this.formData.startTime = result.data.startTime.split(' ')[1].split("0:00")[0]+ 0
          this.formData.endTime = result.data.endTime.split(' ')[1].split("0:00")[0]+ 0
          this.timeQuantumList.forEach(i=> {
            if(i.match(this.formData.startTime)) {
              this.startTime = i
            }

            if(i.match(this.formData.endTime)) {
              this.endTime = i
            }
          })
          
      
          result.data.flowList = result.data.flowList.map((i,index)=> {
            let historyItem = result.data.historyList[index];
            if(historyItem) {
              i.result = historyItem.result;
              i.name = historyItem.operatorName;
              i.createTime = historyItem.createTime;
              i.unityName = historyItem.unityName;
              i.operatorPhoto = 'https://www.waibizi.com/'+historyItem.operatorPhoto
            }
            return i;
          })
          if(!result.data.historyList.length) {
            result.data.flowList.unshift({
              name: result.data.chargeName, 
              createTime:result.data.createTime,
              operatorPhoto:'https://www.waibizi.com/'+ this.$store.getters.getUserInfo.photo
            })
          }
          result.data.flowList.push({name:'分配完成'})
          that.formData.planAddress = [that.formData.planAddress]
        }
      }
    },
    async init() {
      this.filterData = this.$api.applyRender({});

      if (this.pageQuery.applyFromId) {
        this.getDetail();
      }
    },

    async getDetail() {
      let res = await this.$api.applyForm(this.pageQuery.applyFromId);
      res.planAddress.split(",");
      this.formData.planAddress = res;
    },

    changeAmount0(value) {
      this.formData.equipmentAmount[0].amount = value;
    },
    changeAmount1(value) {
      this.formData.equipmentAmount[1].amount = value;
    },
    changeAmount2(value) {
      this.formData.equipmentAmount[2].amount = value;
    },
    changeAmount3(value) {
      this.formData.equipmentAmount[3].amount = value;
    },

    bindPickerChangea(a) {
      this.formData.fieldTypeName = a.detail.value;
    },
    bindPickerChangeb(a) {
      this.formData.unityName = a.detail.value;
    },
    bindPickerChangec(a) {
      this.formData.sffgdgg = a.detail.value;
    },
    bindPickerChanged(a) {
      this.formData.sffgdgh = a.detail.value;
    },
    bindPickerChangedase(a) {
      this.sffgdgf = a.detail.value;
      // this.formData.sffgdgf = a.detail.value;
    },
    yjjhsd() {
      let that = this;
      uni.chooseImage({
        success: function (res) {
          res.tempFilePaths.map((a) => {
            uni.uploadFile({
              url: "https://www.waibizi.com/file/upload", //仅为示例，非真实的接口地址
              filePath: a,
              name: "file",
              success: (uploadFileRes) => {
                that.formData.planAddress.push(
                  JSON.parse(uploadFileRes.data).data
                );
              },
            });
          });
        },
      });
    },
    closweer(e) {
      this.formData.planAddress.splice(e, 1);
    },
  },
};
</script>
<style scoped>
.kkjlhjksdftty {
  background: #fff;
  overflow: hidden;
  border-radius: 8upx;
}

.fgdgfdty {
  width: 180upx;
}

.dfgdftyx {
  line-height: 88upx;
  padding: 0 20upx;
}

.dsftgrfyy {
  height: 88upx;
}

.dsfdsrtty {
  height: 200upx;
  padding-top: 20upx;
}

.dsfdsftyxre {
  position: absolute;
  right: 20upx;
  top: 34upx;
  width: 22upx;
  height: 22upx;
}

.dfdstydrr {
  transform: scale(0.8);
  display: inline-block;
  margin-top: 10upx;
}

.jjhdsdsrtt {
  width: 110upx;
  text-align: right;
}

.eerttser {
  width: 150upx;
  height: 150upx;
  display: inline-block;
}

.eerttser image.fm {
  width: 100%;
  height: 100%;
}

.dsfsdft {
  background: #10fc97;
}

.dsfertxe {
  position: absolute;
  right: -10upx;
  top: -10upx;
}

.fgdfgfdtyy {
  padding-bottom: 120upx;
}
</style>
